// 封装一个代替 getElementById 的方法
function ById(id) {
  return typeof id === "string" ? document.getElementById(id) : id; // 三元操作符
}

// 声明全局变量
var index = 0, // 索引（非常重要，主要靠它去切换对应的图片）
  timer = null, // 定时器
  pics = ById("banner").getElementsByTagName("div"), // 取出 banner 下面 div 元素的集合
  dots = ById("dots").getElementsByTagName("span"),
  prev = ById("prev"),
  next = ById("next"),
  len = pics.length,
  menu = ById("menu-content"),
  subMenu = ById("sub-menu"),
  menuItems = menu.getElementsByClassName("menu-item"),
  innerBox = subMenu.getElementsByClassName("inner-box");

function slideImg() {
  var main = ById("main");
  // 滑过清除定时器，离开继续
  main.onmouseover = function() {
    // 滑过清除定时器
    if (timer) clearInterval(timer);
  };
  // 绑定鼠标离开事件，定时器触发切换图片
  main.onmouseout = function() {
    // 调用onmouseout事件
    timer = setInterval(function() {
      index++;
      if (index >= len) {
        index = 0;
      }
      changeImg(); // 调用切换图片函数
    }, 3000);
  };

  // 自动在main上触发鼠标离开的事件
  main.onmouseout(); // 调用onmouseout方法

  // 遍历 dots 下的所有 span，绑定点击事件，当点击圆点时切换图片
  for (var j = 0; j < len; j++) {
    // 给所有的 span 添加一个 id 元素，值为 j，作为当前 span 的索引
    dots[j].id = j;
    dots[j].onclick = function() {
      // 改变index为当前span的id值
      index = this.id;
      // 调用changeImg方法切换图片
      changeImg();
    };
  }
  // 下一张按钮
  next.onclick = function() {
    index++; // 递增
    if (index >= len) {
      index = 0; // 第一张
    }
    changeImg();
  };
  // 上一张按钮
  prev.onclick = function() {
    index--; // 递减
    if (index < 0) {
      index = len - 1; // 最后一张
    }
    changeImg();
  };

  // 导航菜单
  // 遍历主菜单，且绑定事件
  for (var m = 0; m < menuItems.length; m++) {
    //给每一个 menu-item 增加一个自定义的元素 data-index，它的值为 m
    menuItems[m].setAttribute("data-index", m);
    // 绑定滑过事件
    menuItems[m].onmouseover = function() {
      // 取出元素 data-index 的值
      var idx = this.getAttribute("data-index");
      // 修改类的值，由"sub-menu hide"改为"sub-menu"，使其不隐藏
      subMenu.className = "sub-menu";
      //遍历子菜单，使其全部隐藏（不干涉后面的显示）; 遍历主菜单，使其的背景颜色全部隐藏；
      for (var n = 0; n < innerBox.length; n++) {
        innerBox[n].style.display = "none";

        menuItems[n].style.background = "none";
      }
      // 当滑过主菜单的时候，使其对应的子菜单显示出来和主菜单的背景颜色发生改变，标出出来；
      innerBox[idx].style.display = "block";
      menuItems[idx].style.background = "rgba(0,0,0,0.1)";
    };
    // 离开主菜单时，子菜单隐藏
    menu.onmouseout = function() {
      subMenu.className = "sub-menu hide";
    };
    // 滑过子菜单时，子菜单显示
    subMenu.onmouseover = function() {
      subMenu.className = "sub-menu";
    };
    // 离开子菜单时，子菜单隐藏
    subMenu.onmouseout = function() {
      subMenu.className = "sub-menu hide";
    };
  }
}

// 切换图片
function changeImg() {
  // 遍历 banner 下的所有的 div 及 dots 下所有的 span，先将 div 隐藏，将 span 的类的值设置为空
  for (var i = 0; i < len; i++) {
    pics[i].style.display = "none";
    dots[i].className = "";
  }
  // 再根据 index 索引找到当前的 div 和 span，将其显示出来和设为当前（这样防止干涉）
  pics[index].style.display = "block"; // 不能用 className，会重写元素上的类
  dots[index].className = "active"; // 重新设定值为 active，展示样式
}

slideImg();
